<template>
  <div>
    <div class="flexr-start item-center">
      <el-button @click="navTo('/schoolList')" size="mini" icon="el-icon-arrow-left" circle></el-button>
      <h2 class="margin-left-shi">保存商品</h2>
    </div>
    <div style="margin-top:15px;border-bottom: 1px solid #e1e1e1;width:100%"></div>
     <Form :model="submitData" label-postion="top" class="margin-top-ershi">
      <FormItem label="商品图片">
          <div class="demo-upload-list" v-for="item in uploadList" :key="item.uploadList">
            <template v-if="item.status === 'finished'">
              <img :src="item.url">
              <div class="demo-upload-list-cover">
                <Icon type="ios-eye-outline" @click.native="handleView(item.url)"></Icon>
                <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
              </div>
            </template>
            <template v-else>
              <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
            </template>
          </div>
          <Upload
            ref="upload"
            :default-file-list="defaultList"
            :on-success="handleSuccess"
            :format="['jpg','jpeg','png']"
            :max-size="100"
            :on-format-error="handleFormatError"
            :on-exceeded-size="handleMaxSize"
            :show-upload-list="false"
            type="drag"
            action="https://www.chuyinkeji.cn/ops/filesystem/upfile"
            style="display: inline-block;width:58px;"
          >
            <div style="width: 58px;height:58px;line-height: 58px;">
              <Icon type="ios-camera" size="20"></Icon>
            </div>
          </Upload>
          <Modal title="查看图片" v-model="visible">
            <img
              :src="imgUrl"
              v-if="visible"
              style="width: 100%"
            >
          </Modal>
        </FormItem>
          <FormItem label="上架状态">
            <el-switch v-model="submitData.isShow"></el-switch>
          </FormItem>
        <FormItem label="商品名称">
          <Input v-model="submitData.productName" placeholder="请输入商品名称"></Input>
        </FormItem>
        <FormItem label="商品销量">
          <Input v-model="submitData.sale" placeholder="请输入商品销量"></Input>
        </FormItem>
        <FormItem label="兑换所需积分">
          <Input v-model="submitData.price" placeholder="请输入商品兑换的积分"></Input>
        </FormItem>
        <FormItem>
            <Button type="primary" :loading="loading" @click="add()">保存提交</Button>
        </FormItem>
      </Form>
  </div>
</template>
<style>
@import url("../../assets/css/component.css");
</style>
<script>
var that;
export default {
  data() {
    return {
      loading: false,
      submitData: {
        productImage:"",
        productName: "",
        sale: "",
        isShow: false,
        price: "",
        schoolId: sessionStorage.getItem("surperId")
      },
      imgUrl:'',
      visible: false,
      defaultList: [{name:'a42bdcc1178e62b4694c830f028db5c0',
      url:'https://o5wwk8baw.qnssl.com/a42bdcc1178e62b4694c830f028db5c0/avatar'}
      ],
      uploadList: []
    };
  },
  mounted() {
    that = this;
      if(this.$route.query.data){
        this.submitData = {
          id :this.$route.query.data.id,
          productImage: this.$route.query.data.productImage,
          productName: this.$route.query.data.productName,
          sale: this.$route.query.data.sale,
          isShow: this.$route.query.data.isShow == 1 ? true : false,
          price: this.$route.query.data.price,
          schoolId: sessionStorage.getItem("surperId")
        };
        this.defaultList[0].url = this.$route.query.data.productImage,
        this.imgUrl = this.$route.query.data.productImage
    }else{
      this.submitData = {
        productImage:"",
        productName: "",
        sale: "",
        isShow: false,
        price: "",
        schoolId: sessionStorage.getItem("surperId")
      }
    }
    this.uploadList = this.$refs.upload.fileList;
  },
  methods: {
    //跳转回去商品列表
    navTo(path) {
      this.$router.go(-1);
    },
    //添加商品
    add() {
      var that = this;
      this.loading = true;
      this.submitData.isShow = this.submitData.isShow == true? '1':'0'
      if(this.$route.query.data){
        this.$http
          .post(this.com.NODE_API + "/ops/source/product/update", this.submitData, {
            headers: { token: sessionStorage.getItem("token") },
            emulateJSON: true
          })
          .then(res => {
            if (res.data.code) {
              that.$message({
                showClose: true,
                type: "success",
                message: '更新成功'
              });
              this.$router.go(-1);
            } else {
              that.$message({
                showClose: true,
                type: "error",
                message: res.data.msg
              });
            }
            that.loading = false;
          });
      }else{
        this.$http
          .post(this.com.NODE_API + "/ops/source/product/add", this.submitData, {
            headers: { token: sessionStorage.getItem("token") },
            emulateJSON: true
          })
          .then(res => {
            if (res.data.code) {
              that.$message({
                showClose: true,
                type: "success",
                message: '添加成功'
              });
              this.$router.go(-1);
            } else {
              that.$message({
                showClose: true,
                type: "error",
                message: res.data.msg
              });
            }
            that.loading = false;
          });
      }
    },
    handleView(url) {
      this.imgUrl = url;
      this.visible = true;
    },
    handleRemove(file) {
      const fileList = this.$refs.upload.fileList;
      this.$refs.upload.fileList.splice(fileList.indexOf(file), 1)
    },
    handleSuccess(res, file) {
      file.url =res;
      this.submitData.productImage = res;
    },
    handleFormatError(file) {
      that.$message({
        showClose: true,
        type: "error",
        message: "只限于传jpg,jpeg,png三种图片类型"
      });
    },
    handleMaxSize(file) {
      that.$message({
        showClose: true,
        type: "error",
        message: "上传文件过大，请小于100kb"
      });
    },
  }
};
</script>
